<script lang="ts">
import {defineComponent, PropType, computed, ref} from 'vue'
import AppSvgIcon from "@/components/SvgIcon.vue"

export default defineComponent({
  name: "AppDropdownMenu",
  components: {
    AppSvgIcon
  },
  emits: {
    quit: () => true,
    trigger: (key: string, param: any) => true,
  },
  props: {
    top: {
      type: String,
      required: true
    },
    left: {
      type: String,
      required: true
    },
    menu: {
      type: Array as PropType<{ label: string, icon?: string, disable?: boolean, key: string, param?: any }[]>,
      required: false,
      default() {
        return []
      }
    }
  },
  setup(props, {emit}) {
    const show = ref(false)
    const position = ref({top: props.top, left: props.left})

    /**
     * 是否显示图标
     */
    const isIcon = computed(() => {
      if (props.menu?.length === 0) return true
      for (let item of props.menu) {
        if (item?.icon) {
          return true
        }
      }
      return false
    })


    /**
     * 是否显示图标
     */
    const MenuData = computed(() => {
      let listData = []
      for (let item of props.menu) {
        if (item?.disable) continue
        listData.push(item)
      }
      return listData
    })


    /**
     * 退出和退出事件
     */
    function quitEvent() {
      emit('quit')
    }

    /**
     * 触发事件
     * @param row
     * @constructor
     */
    function TriggerTvent(row: any) {
      emit('trigger', row.key, row.param)
    }

    return {isIcon, quitEvent, show, position, TriggerTvent,MenuData}
  }
})
</script>
<template>
  <div class="app-dropdown-menu" :style="position">
    <ul class="dropdown-menu-item">
      <li v-for="(item,index) in MenuData" :key="index" @click="TriggerTvent(item)">
        <app-svg-icon v-if="isIcon && item.icon" :size="15" :name="item.icon"/>
        <span>{{ item.label }}</span>
      </li>
      <li @click="quitEvent">
        <app-svg-icon v-if="isIcon" :size="15" name="quit"/>
        <span>取消</span>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.app-dropdown-menu {
  position: fixed;
  z-index: 999999;
  display: inline-block;
  background: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color-light);
  box-shadow: var(--el-dropdown-menu-box-shadow);
  margin: 0;
  text-align: center;
  box-sizing: border-box;
  border-radius: 4px;

  .dropdown-menu-item {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      padding: 6px 12px;
      line-height: 20px;
      cursor: pointer;
      border-top: 1px solid var(--el-border-color-light);
      text-align: left;

      &:hover {
        background: var(--el-color-info-light-9);

        span {
          color: var(--el-color-primary);
        }

        :deep(.app-svg-icon) {
          use {
            fill: var(--el-color-primary);
          }
        }
      }

      .app-svg-icon {
        line-height: 20px;
        vertical-align: middle;
        margin-top: -2px;

        use {
          fill: var(--el-color-primary);
        }
      }

      span {
        line-height: 20px;
        margin-left: 5px;
        letter-spacing: 4px;
        font-size: 14px;
        color: var(--el-text-color-regular);
      }
    }
  }
}
</style>